<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>笔记云 - 个人笔记与文件管理平台</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome图标 -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

  <!-- 自定义配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#334155', // 主色调：深蓝灰（根据设计方案调整）
            success: '#10B981', // 辅助色：绿色（确认按钮）
            warning: '#F59E0B', // 辅助色：橙色（重要操作）
            neutral: {
              100: '#F5F7FA',
              200: '#E4E7ED',
              300: '#C0C4CC',
              800: '#333333'
            }
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>

  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .card-hover {
        @apply transition-all duration-300 hover:scale-[1.02] hover:shadow-lg;
      }
      .btn-primary {
        @apply bg-primary text-white px-4 py-2 rounded-md transition-all hover:bg-primary/90 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-primary disabled:active:scale-100;
      }
      .btn-success {
        @apply bg-success text-white px-4 py-2 rounded-md transition-all hover:bg-success/90 active:scale-95;
      }
      .nav-item {
        @apply flex items-center gap-2 px-4 py-3 rounded-md transition-all hover:bg-neutral-100;
      }
      .nav-item-active {
        @apply bg-primary/10 text-primary font-medium;
      }
      .loading {
        @apply opacity-50 pointer-events-none;
      }
      .input-error {
        @apply border-red-300 focus:border-red-500 focus:ring-red-200;
      }
      .input-success {
        @apply border-green-300 focus:border-green-500 focus:ring-green-200;
      }
      .fade-in {
        animation: fadeIn 0.3s ease-in-out;
      }
      .slide-up {
        animation: slideUp 0.3s ease-out;
      }
      .pulse-slow {
        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
      }
      .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .pagination-btn {
        @apply px-3 py-2 text-sm border border-neutral-300 hover:bg-neutral-50 transition-colors;
      }
      .pagination-btn.active {
        @apply bg-primary text-white border-primary;
      }
      .pagination-btn.disabled {
        @apply opacity-50 cursor-not-allowed hover:bg-white;
      }
      .pagination-ellipsis {
        @apply px-2 py-2 text-sm text-neutral-500;
      }
    }
    
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    @keyframes slideUp {
      from { 
        opacity: 0;
        transform: translateY(10px);
      }
      to { 
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    /* 自定义滚动条 */
    ::-webkit-scrollbar {
      width: 6px;
    }
    
    ::-webkit-scrollbar-track {
      background: #f1f1f1;
    }
    
    ::-webkit-scrollbar-thumb {
      background: #c1c1c1;
      border-radius: 3px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
      background: #a8a8a8;
    }
    
    /* 输入框聚焦动画 */
    input:focus {
      transform: scale(1.01);
    }
    
    /* 按钮点击效果 */
    .btn-primary:active {
      transform: scale(0.98);
    }
    
    /* 登录表单动画 */
    #login-form {
      animation: slideUp 0.6s ease-out;
    }
    
    /* 系统状态指示器动画 */
    #system-status {
      animation: pulse 2s infinite;
    }
    
    /* 存储警告样式 */
    .storage-warning {
      @apply border-orange-300 bg-orange-50;
    }
    
    .storage-critical {
      @apply border-red-300 bg-red-50 animate-pulse;
    }
    
    /* 存储进度条动画 */
    .storage-fill {
      transition: width 0.5s ease-in-out;
    }
  </style>
</head>

<body class="font-sans text-neutral-800 bg-white">
  <!-- 页面容器 -->
  <div id="app">
    <!-- 加载指示器 -->
    <div id="loading" class="fixed inset-0 bg-white/80 flex items-center justify-center z-50 hidden">
      <div class="text-center">
        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
        <p class="text-neutral-600">加载中... / Loading...</p>
      </div>
    </div>

    <!-- 通知组件 -->
    <div id="notification" class="fixed top-4 right-4 z-40 hidden">
      <div class="bg-white border border-neutral-200 rounded-lg shadow-lg p-4 max-w-sm">
        <div class="flex items-center gap-3">
          <div id="notification-icon" class="flex-shrink-0"></div>
          <div>
            <p id="notification-message" class="text-sm font-medium"></p>
          </div>
          <button id="notification-close" class="flex-shrink-0 text-neutral-400 hover:text-neutral-600">
            <i class="fa fa-times"></i>
          </button>
        </div>
      </div>
    </div>

    <!-- 登录页面 -->
    <div id="login-page" class="min-h-screen bg-neutral-100 flex items-center justify-center p-4">
      <div class="bg-white rounded-lg shadow-xl p-8 w-full max-w-md">
        <!-- 头部Logo和标题 -->
        <div class="text-center mb-8">
          <div class="flex items-center justify-center gap-2 mb-4">
            <i class="fa fa-cloud text-primary text-3xl"></i>
            <span class="text-2xl font-bold text-primary">笔记云</span>
          </div>
          <p class="text-neutral-600">个人笔记与文件管理平台</p>
          <p class="text-sm text-neutral-500 mt-1">Personal Notes & File Management Platform</p>
        </div>

        <!-- 登录表单 -->
        <form id="login-form" novalidate>
          <!-- 用户名输入-->
          <div class="mb-4">
            <label for="email" class="block text-sm font-medium text-neutral-700 mb-2">
              <i class="fa fa-envelope text-neutral-400 mr-1"></i>
              邮箱地址
            </label>
            <input type="email" id="email" name="email" required autocomplete="email"
              class="w-full px-3 py-2 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-colors"
              placeholder="请输入邮箱地址">
            <div id="email-error" class="text-red-500 text-sm mt-1 hidden"></div>
          </div>

          <!-- 密码输入 -->
          <div class="mb-4">
            <label for="password" class="block text-sm font-medium text-neutral-700 mb-2">
              <i class="fa fa-lock text-neutral-400 mr-1"></i>
              密码
            </label>
            <div class="relative">
              <input type="password" id="password" name="password" required autocomplete="current-password"
                class="w-full px-3 py-2 pr-10 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-colors"
                placeholder="请输入密码">
              <button type="button" id="toggle-password"
                class="absolute inset-y-0 right-0 pr-3 flex items-center text-neutral-400 hover:text-neutral-600 transition-colors"
                title="显示/隐藏密码">
                <i class="fa fa-eye"></i>
              </button>
            </div>
            <div id="password-error" class="text-red-500 text-sm mt-1 hidden"></div>
          </div>

          <!-- 记住我选项 -->
          <div class="mb-6">
            <label class="flex items-center cursor-pointer">
              <input type="checkbox" id="remember-me" name="rememberMe"
                class="rounded border-neutral-300 text-primary focus:ring-primary/30 focus:ring-2">
              <span class="ml-2 text-sm text-neutral-600 select-none">
                记住我
                <span class="text-xs text-neutral-400 block">30天内自动登录</span>
              </span>
            </label>
          </div>

          <!-- 登录按钮 -->
          <button type="submit" id="login-btn"
            class="w-full btn-primary py-3 text-lg font-medium relative overflow-hidden" disabled>
            <span id="login-btn-text">登录</span>
            <div id="login-btn-loading" class="absolute inset-0 flex items-center justify-center hidden">
              <i class="fa fa-spinner fa-spin mr-2"></i>
              登录中...
            </div>
          </button>

          <!-- 表单底部提示 -->
          <div id="form-error" class="mt-4 p-3 bg-red-50 border border-red-200 rounded-md text-red-700 text-sm hidden">
            <i class="fa fa-exclamation-circle mr-1"></i>
            <span id="form-error-message"></span>
          </div>
        </form>

        <!-- 分割线 -->
        <div class="mt-8 mb-6">
          <div class="relative">
            <div class="absolute inset-0 flex items-center">
              <div class="w-full border-t border-neutral-200"></div>
            </div>
            <div class="relative flex justify-center text-sm">
              <span class="px-2 bg-white text-neutral-500">或</span>
            </div>
          </div>
        </div>

        <!-- 底部信息 -->
        <div class="text-center space-y-3">
          <p class="text-sm text-neutral-600">
            <i class="fa fa-info-circle text-neutral-400 mr-1"></i>
            需要账号？请联系管理员创建
          </p>


          <!-- 系统状态指示 -->
          <div class="flex items-center justify-center gap-2 text-xs text-neutral-400">
            <div class="flex items-center gap-1">
              <div id="system-status" class="w-2 h-2 bg-success rounded-full"></div>
              <span>系统正常</span>
            </div>
          </div>
        </div>

        <!-- 版本信息 -->
        <div class="mt-6 pt-4 border-t border-neutral-100 text-center">
          <p class="text-xs text-neutral-400">
            笔记云 v1.0.0
          </p>
        </div>
      </div>

      <!-- 登录页面背景装饰 -->
      <div class="fixed inset-0 -z-10 overflow-hidden pointer-events-none">
        <div class="absolute -top-40 -right-40 w-80 h-80 bg-primary/5 rounded-full"></div>
        <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-success/5 rounded-full"></div>
      </div>
    </div>

    <!-- 仪表盘页面（默认隐藏） -->
    <div id="dashboard-page" class="min-h-screen bg-neutral-50 hidden">
      <!-- 顶部导航栏 -->
      <header class="bg-white border-b border-neutral-200 sticky top-0 z-30">
        <div class="flex items-center justify-between px-4 py-3">
          <!-- 左侧：Logo和菜单切换 -->
          <div class="flex items-center gap-4">
            <!-- 移动端菜单切换按钮 -->
            <button id="mobile-menu-toggle" class="lg:hidden p-2 rounded-md hover:bg-neutral-100 transition-colors"
              title="切换菜单">
              <i class="fa fa-bars text-neutral-600"></i>
            </button>

            <!-- Logo -->
            <div class="flex items-center gap-2">
              <i class="fa fa-cloud text-primary text-xl"></i>
              <span class="text-lg font-bold text-primary">笔记云</span>
            </div>
          </div>

          <!-- 中间：全局搜索 -->
          <div class="hidden md:flex flex-1 max-w-md mx-8">
            <div class="relative w-full">
              <input type="text" id="global-search" placeholder="搜索笔记和文件..."
                class="w-full pl-10 pr-4 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-colors">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <i class="fa fa-search text-neutral-400"></i>
              </div>
              <div class="absolute inset-y-0 right-0 pr-3 flex items-center">
                <kbd
                  class="hidden sm:inline-block px-2 py-1 text-xs font-semibold text-neutral-500 bg-neutral-100 border border-neutral-300 rounded">
                  Ctrl K
                </kbd>
              </div>
            </div>
          </div>

          <!-- 右侧：用户菜单和操作 -->
          <div class="flex items-center gap-3">
            <!-- 通知按钮 -->
            <button id="notifications-btn" class="relative p-2 rounded-md hover:bg-neutral-100 transition-colors"
              title="通知">
              <i class="fa fa-bell text-neutral-600"></i>
              <span id="notification-badge"
                class="absolute -top-1 -right-1 w-4 h-4 bg-warning text-white text-xs rounded-full flex items-center justify-center hidden">
                3
              </span>
            </button>

            <!-- 存储使用情况 -->
            <div
              class="hidden sm:flex items-center gap-2 px-3 py-1 bg-neutral-100 rounded-md cursor-pointer hover:bg-neutral-200 transition-colors"
              data-storage-detail>
              <i class="fa fa-hdd-o text-neutral-500 text-sm"></i>
              <span id="storage-usage" class="text-sm text-neutral-600" data-storage-element>加载中...</span>
            </div>

            <!-- 用户菜单 -->
            <div class="relative">
              <button id="user-menu-btn"
                class="flex items-center gap-2 p-2 rounded-md hover:bg-neutral-100 transition-colors">
                <div
                  class="w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center text-sm font-medium">
                  <i class="fa fa-user"></i>
                </div>
                <span id="user-name" class="hidden sm:block text-sm font-medium text-neutral-700">用户</span>
                <i class="fa fa-chevron-down text-neutral-400 text-xs"></i>
              </button>

              <!-- 用户下拉菜单 -->
              <div id="user-menu"
                class="absolute right-0 mt-2 w-48 bg-white border border-neutral-200 rounded-lg shadow-lg py-1 hidden z-40">
                <a href="/profile.html" class="flex items-center gap-2 px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-50">
                  <i class="fa fa-user text-neutral-400"></i>
                  个人中心
                </a>
                <a href="#" class="flex items-center gap-2 px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-50">
                  <i class="fa fa-cog text-neutral-400"></i>
                  设置
                </a>
                <div class="border-t border-neutral-100 my-1"></div>
                <button id="logout-btn"
                  class="w-full flex items-center gap-2 px-4 py-2 text-sm text-red-600 hover:bg-red-50">
                  <i class="fa fa-sign-out text-red-400"></i>
                  退出登录
                </button>
              </div>
            </div>
          </div>
        </div>
      </header>

      <div class="flex">
        <!-- 左侧导航菜单 -->
        <aside id="sidebar"
          class="fixed lg:static inset-y-0 left-0 z-40 w-64 bg-white border-r border-neutral-200 transform -translate-x-full lg:translate-x-0 transition-transform duration-300 ease-in-out">
          <!-- 菜单头部 -->
          <div class="p-4 border-b border-neutral-100">
            <div class="flex items-center justify-between">
              <h2 class="text-sm font-semibold text-neutral-500 uppercase tracking-wide">
                导航菜单
              </h2>
              <button id="sidebar-close" class="lg:hidden p-1 rounded-md hover:bg-neutral-100">
                <i class="fa fa-times text-neutral-400"></i>
              </button>
            </div>
          </div>

          <!-- 菜单项 -->
          <nav class="p-4 space-y-2">
            <!-- 仪表盘 -->
            <a href="#dashboard" class="nav-item nav-item-active" data-page="dashboard">
              <i class="fa fa-tachometer text-lg"></i>
              <span>仪表盘</span>
            </a>

            <!-- 笔记管理 -->
            <a href="#notes" class="nav-item" data-page="notes">
              <i class="fa fa-sticky-note text-lg"></i>
              <span>笔记管理</span>
            </a>

            <!-- 文件管理 -->
            <a href="#files" class="nav-item" data-page="files">
              <i class="fa fa-folder text-lg"></i>
              <span>文件管理</span>
            </a>

            <!-- 分割线 -->
            <div class="border-t border-neutral-100 my-4"></div>

            <!-- 快速操作 -->
            <div class="space-y-2">
              <p class="text-xs font-semibold text-neutral-500 uppercase tracking-wide px-4">
                快速操作
              </p>

              <button class="nav-item w-full text-left" id="new-note-btn"
                onclick="window.location.href='/note-editor.html'">
                <i class="fa fa-plus text-lg text-success"></i>
                <span>新建笔记</span>
              </button>

              <button class="nav-item w-full text-left" id="upload-file-btn">
                <i class="fa fa-upload text-lg text-primary"></i>
                <span>上传文件</span>
              </button>
            </div>

            <!-- 分割线 -->
            <div class="border-t border-neutral-100 my-4"></div>

            <!-- 标签和分类 -->
            <div class="space-y-2">
              <p class="text-xs font-semibold text-neutral-500 uppercase tracking-wide px-4">
                标签
              </p>

              <a href="#" class="nav-item">
                <i class="fa fa-tag text-lg text-blue-500"></i>
                <span>工作</span>
                <span class="ml-auto text-xs text-neutral-400">12</span>
              </a>

              <a href="#" class="nav-item">
                <i class="fa fa-tag text-lg text-green-500"></i>
                <span>个人</span>
                <span class="ml-auto text-xs text-neutral-400">8</span>
              </a>

              <a href="#" class="nav-item">
                <i class="fa fa-tag text-lg text-orange-500"></i>
                <span>学习</span>
                <span class="ml-auto text-xs text-neutral-400">15</span>
              </a>
            </div>
          </nav>

          <!-- 侧边栏底部 -->
          <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-neutral-100 bg-white">
            <div class="text-center cursor-pointer hover:bg-neutral-50 p-2 rounded-md transition-colors"
              data-storage-detail>
              <div class="text-xs text-neutral-500 mb-2">存储使用情况</div>
              <div class="w-full bg-neutral-200 rounded-full h-2 mb-2" data-storage-progress>
                <div id="storage-progress" class="bg-primary h-2 rounded-full transition-all duration-300 storage-fill"
                  style="width: 0%"></div>
              </div>
              <div class="text-xs text-neutral-600">
                <span id="storage-used" data-storage-element>0 MB</span> / <span id="storage-total"
                  data-storage-element>30 GB</span>
              </div>
            </div>
          </div>
        </aside>

        <!-- 主内容区域 -->
        <main class="flex-1 lg:ml-0">
          <!-- 仪表盘内容 -->
          <div id="dashboard-content" class="p-6">
            <!-- 欢迎区域 -->
            <div class="mb-8 relative overflow-hidden bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl p-6 border border-neutral-200">
              <!-- 背景装饰 -->
              <div class="absolute top-0 right-0 w-48 h-32 opacity-10 rounded-lg overflow-hidden">
                <img src="/static/image/wallhaven-wq3yop.webp" alt="" class="w-full h-full object-cover">
              </div>
              
              <div class="relative z-10">
                <div class="flex items-center justify-between">
                  <div>
                    <h1 class="text-3xl font-bold text-neutral-800 mb-2">
                      欢迎回来！
                    </h1>
                    <p class="text-neutral-600 mb-4">
                      今天是 <span id="current-date"></span>，开始您的高效工作吧。
                    </p>
                    
                    <!-- 实时时间 -->
                    <div class="flex items-center gap-4 text-sm text-neutral-500">
                      <div class="flex items-center gap-1">
                        <i class="fa fa-clock-o text-primary"></i>
                        <span id="current-time"></span>
                      </div>
                      <div class="flex items-center gap-1">
                        <i class="fa fa-sun-o text-warning"></i>
                        <span>祝您工作愉快</span>
                      </div>
                    </div>
                  </div>
                  
                  <!-- 装饰图标 -->
                  <div class="hidden md:block">
                    <div class="w-20 h-20 bg-gradient-to-br from-blue-500 via-purple-600 to-pink-500 rounded-full flex items-center justify-center shadow-lg">
                      <i class="fa fa-rocket text-white text-2xl"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 统计卡片 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
              <!-- 笔记统计 -->
              <div class="bg-white rounded-lg border border-neutral-200 p-6 card-hover">
                <div class="flex items-center justify-between">
                  <div>
                    <p class="text-sm font-medium text-neutral-600">笔记总数</p>
                    <p id="notes-count" class="text-2xl font-bold text-neutral-800">-</p>
                  </div>
                  <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                    <i class="fa fa-sticky-note text-blue-600 text-xl"></i>
                  </div>
                </div>
                <div class="mt-4 flex items-center text-sm">
                  <span class="text-green-600">+3</span>
                  <span class="text-neutral-500 ml-1">本周新增</span>
                </div>
              </div>

              <!-- 文件统计 -->
              <div class="bg-white rounded-lg border border-neutral-200 p-6 card-hover">
                <div class="flex items-center justify-between">
                  <div>
                    <p class="text-sm font-medium text-neutral-600">文件总数</p>
                    <p id="files-count" class="text-2xl font-bold text-neutral-800">-</p>
                  </div>
                  <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                    <i class="fa fa-folder text-green-600 text-xl"></i>
                  </div>
                </div>
                <div class="mt-4 flex items-center text-sm">
                  <span class="text-green-600">+7</span>
                  <span class="text-neutral-500 ml-1">本周新增</span>
                </div>
              </div>

              <!-- 存储使用 -->
              <div class="bg-white rounded-lg border border-neutral-200 p-6 card-hover cursor-pointer"
                data-storage-detail data-storage-warning>
                <div class="flex items-center justify-between">
                  <div>
                    <p class="text-sm font-medium text-neutral-600">存储使用</p>
                    <p id="storage-usage-card" class="text-2xl font-bold text-neutral-800" data-storage-element>-</p>
                  </div>
                  <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
                    <i class="fa fa-hdd-o text-orange-600 text-xl"></i>
                  </div>
                </div>
                <div class="mt-4 flex items-center text-sm">
                  <span id="storage-percentage" class="text-orange-600" data-storage-element>-%</span>
                  <span class="text-neutral-500 ml-1">已使用</span>
                </div>
              </div>

              <!-- 最近活动 -->
              <div class="bg-white rounded-lg border border-neutral-200 p-6 card-hover">
                <div class="flex items-center justify-between">
                  <div>
                    <p class="text-sm font-medium text-neutral-600">今日活动</p>
                    <p id="activity-count" class="text-2xl font-bold text-neutral-800">-</p>
                  </div>
                  <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                    <i class="fa fa-line-chart text-purple-600 text-xl"></i>
                  </div>
                </div>
                <div class="mt-4 flex items-center text-sm">
                  <span class="text-purple-600">活跃</span>
                  <span class="text-neutral-500 ml-1">状态良好</span>
                </div>
              </div>
            </div>

            <!-- 最近内容 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
              <!-- 最近笔记 -->
              <div class="bg-white rounded-lg border border-neutral-200 p-6">
                <div class="flex items-center justify-between mb-4">
                  <h2 class="text-lg font-semibold text-neutral-800">最近笔记</h2>
                  <a href="#notes" class="text-sm text-primary hover:text-primary/80">查看全部</a>
                </div>
                <div id="recent-notes" class="space-y-3">
                  <!-- 笔记项目将通过JavaScript动态加载 -->
                  <div class="text-center py-8 text-neutral-500">
                    <i class="fa fa-spinner fa-spin text-2xl mb-2"></i>
                    <p>加载中...</p>
                  </div>
                </div>
              </div>

              <!-- 最近文件 -->
              <div class="bg-white rounded-lg border border-neutral-200 p-6">
                <div class="flex items-center justify-between mb-4">
                  <h2 class="text-lg font-semibold text-neutral-800">最近文件</h2>
                  <a href="#files" class="text-sm text-primary hover:text-primary/80">查看全部</a>
                </div>
                <div id="recent-files" class="space-y-3">
                  <!-- 文件项目将通过JavaScript动态加载 -->
                  <div class="text-center py-8 text-neutral-500">
                    <i class="fa fa-spinner fa-spin text-2xl mb-2"></i>
                    <p>加载中...</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 笔记管理内容 -->
          <div id="notes-content" class="p-6 hidden">
            <!-- 页面标题和操作栏 -->
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6">
              <div>
                <h1 class="text-2xl font-bold text-neutral-800 mb-2">笔记管理</h1>
                <p id="notes-stats" class="text-sm text-neutral-600">加载中...</p>
              </div>
              <div class="flex items-center gap-3 mt-4 sm:mt-0">
                <button id="new-note-btn" class="btn-primary flex items-center gap-2">
                  <i class="fa fa-plus"></i>
                  <span>新建笔记</span>
                </button>
              </div>
            </div>

            <!-- 工具栏 -->
            <div class="bg-white rounded-lg border border-neutral-200 p-4 mb-6">
              <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
                <!-- 搜索和筛选 -->
                <div class="flex flex-col sm:flex-row gap-3 flex-1">
                  <div class="relative flex-1 max-w-md">
                    <input type="text" id="notes-search-input" 
                           placeholder="搜索笔记标题和内容..."
                           class="w-full pl-10 pr-4 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-colors">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                      <i class="fa fa-search text-neutral-400"></i>
                    </div>
                  </div>
                  
                  <select id="notes-sort-select" 
                          class="px-3 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                    <option value="updated_at-desc">最近更新</option>
                    <option value="created_at-desc">最近创建</option>
                    <option value="title-asc">标题 A-Z</option>
                    <option value="title-desc">标题 Z-A</option>
                  </select>
                </div>

                <!-- 视图切换和批量操作 -->
                <div class="flex items-center gap-3">
                  <!-- 批量操作 -->
                  <div class="flex items-center gap-2">
                    <button id="select-all-notes" class="text-sm text-primary hover:text-primary/80">
                      全选
                    </button>
                    <button id="delete-selected-notes" 
                            class="text-sm text-red-500 hover:text-red-600 disabled:opacity-50 disabled:cursor-not-allowed"
                            disabled>
                      删除选中 (0)
                    </button>
                  </div>

                  <!-- 视图切换 -->
                  <div class="flex items-center border border-neutral-300 rounded-lg overflow-hidden">
                    <button id="notes-grid-view-btn" 
                            class="px-3 py-2 text-sm bg-primary text-white transition-colors">
                      <i class="fa fa-th"></i>
                    </button>
                    <button id="notes-list-view-btn" 
                            class="px-3 py-2 text-sm hover:bg-neutral-50 transition-colors">
                      <i class="fa fa-list"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <!-- 加载状态 -->
            <div id="notes-loading" class="text-center py-12 hidden">
              <i class="fa fa-spinner fa-spin text-2xl text-neutral-400 mb-2"></i>
              <p class="text-neutral-500">加载笔记中...</p>
            </div>

            <!-- 空状态 -->
            <div id="notes-empty-state" class="text-center py-12 hidden">
              <div class="w-16 h-16 bg-neutral-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fa fa-sticky-note text-2xl text-neutral-400"></i>
              </div>
              <h3 class="text-lg font-medium text-neutral-800 mb-2">还没有笔记</h3>
              <p class="text-neutral-600 mb-4">创建您的第一个笔记开始记录想法</p>
              <button onclick="document.getElementById('new-note-btn').click()" 
                      class="btn-primary">
                <i class="fa fa-plus mr-2"></i>新建笔记
              </button>
            </div>

            <!-- 网格视图 -->
            <div id="notes-grid-container">
              <div id="notes-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                <!-- 笔记卡片将通过JavaScript动态加载 -->
              </div>
            </div>

            <!-- 列表视图 -->
            <div id="notes-list-container" class="hidden">
              <div class="bg-white rounded-lg border border-neutral-200 overflow-hidden">
                <table id="notes-list" class="w-full">
                  <thead class="bg-neutral-50 border-b border-neutral-200">
                    <tr>
                      <th class="p-3 text-left">
                        <input type="checkbox" class="rounded">
                      </th>
                      <th class="p-3 text-left text-sm font-medium text-neutral-700">标题</th>
                      <th class="p-3 text-left text-sm font-medium text-neutral-700">标签</th>
                      <th class="p-3 text-left text-sm font-medium text-neutral-700">更新时间</th>
                      <th class="p-3 text-left text-sm font-medium text-neutral-700">字数</th>
                      <th class="p-3 text-left text-sm font-medium text-neutral-700">操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    <!-- 笔记行将通过JavaScript动态加载 -->
                  </tbody>
                </table>
              </div>
            </div>

            <!-- 分页 -->
            <div id="notes-pagination" class="flex items-center justify-center gap-2 mt-6">
              <!-- 分页按钮将通过JavaScript动态生成 -->
            </div>
          </div>

          <!-- 文件管理内容 -->
          <div id="files-content" class="p-6 hidden">
            <!-- 页面标题和操作栏 -->
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6">
              <div>
                <h1 class="text-2xl font-bold text-neutral-800 mb-2">文件管理</h1>
                <p id="files-stats" class="text-sm text-neutral-600">加载中...</p>
              </div>
              <div class="flex items-center gap-3 mt-4 sm:mt-0">
                <button id="upload-btn" class="btn-primary flex items-center gap-2">
                  <i class="fa fa-upload"></i>
                  <span>上传文件</span>
                </button>
                <button id="new-folder-btn" class="btn-success flex items-center gap-2">
                  <i class="fa fa-folder-plus"></i>
                  <span>新建文件夹</span>
                </button>
              </div>
            </div>

            <!-- 工具栏 -->
            <div class="bg-white rounded-lg border border-neutral-200 p-4 mb-6">
              <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
                <!-- 路径导航 -->
                <div class="flex items-center gap-2 text-sm">
                  <i class="fa fa-folder text-neutral-400"></i>
                  <span class="text-neutral-600">当前位置:</span>
                  <nav id="breadcrumb" class="flex items-center gap-1">
                    <a href="#" class="text-primary hover:text-primary/80">根目录</a>
                  </nav>
                </div>

                <!-- 视图切换和操作 -->
                <div class="flex items-center gap-3">
                  <!-- 搜索 -->
                  <div class="relative">
                    <input type="text" id="files-search-input" 
                           placeholder="搜索文件..."
                           class="pl-8 pr-4 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-colors">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                      <i class="fa fa-search text-neutral-400 text-sm"></i>
                    </div>
                  </div>

                  <!-- 排序 -->
                  <select id="files-sort-select" 
                          class="px-3 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                    <option value="name-asc">名称 A-Z</option>
                    <option value="name-desc">名称 Z-A</option>
                    <option value="date-desc">最新修改</option>
                    <option value="date-asc">最早修改</option>
                    <option value="size-desc">大小 大-小</option>
                    <option value="size-asc">大小 小-大</option>
                  </select>

                  <!-- 视图切换 -->
                  <div class="flex items-center border border-neutral-300 rounded-lg overflow-hidden">
                    <button id="grid-view-btn" 
                            class="px-3 py-2 text-sm bg-primary text-white transition-colors">
                      <i class="fa fa-th"></i>
                    </button>
                    <button id="list-view-btn" 
                            class="px-3 py-2 text-sm hover:bg-neutral-50 transition-colors">
                      <i class="fa fa-list"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <!-- 上传区域 -->
            <div id="upload-area" class="bg-white rounded-lg border-2 border-dashed border-neutral-300 p-8 mb-6 text-center hidden">
              <div class="mb-4">
                <i class="fa fa-cloud-upload text-4xl text-neutral-400 mb-2"></i>
                <p class="text-lg font-medium text-neutral-700 mb-2">拖拽文件到此处上传</p>
                <p class="text-sm text-neutral-500">或者点击下方按钮选择文件</p>
              </div>
              <div class="flex items-center justify-center gap-3">
                <button id="select-files-btn" class="btn-primary">
                  <i class="fa fa-file mr-2"></i>选择文件
                </button>
                <button id="select-folder-btn" class="btn-success">
                  <i class="fa fa-folder mr-2"></i>选择文件夹
                </button>
              </div>
              <input type="file" id="file-input" multiple hidden>
              <input type="file" id="folder-input" webkitdirectory hidden>
            </div>

            <!-- 文件列表 -->
            <div class="bg-white rounded-lg border border-neutral-200 overflow-hidden">
              <!-- 网格视图 -->
              <div id="files-grid-view">
                <div id="files-grid" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4 p-4">
                  <!-- 文件项目将通过JavaScript动态加载 -->
                </div>
              </div>

              <!-- 列表视图 -->
              <div id="files-list-view" class="hidden">
                <table class="w-full">
                  <thead class="bg-neutral-50 border-b border-neutral-200">
                    <tr>
                      <th class="p-3 text-left">
                        <input type="checkbox" class="rounded">
                      </th>
                      <th class="p-3 text-left text-sm font-medium text-neutral-700">名称</th>
                      <th class="p-3 text-left text-sm font-medium text-neutral-700">大小</th>
                      <th class="p-3 text-left text-sm font-medium text-neutral-700">类型</th>
                      <th class="p-3 text-left text-sm font-medium text-neutral-700">修改时间</th>
                      <th class="p-3 text-left text-sm font-medium text-neutral-700">操作</th>
                    </tr>
                  </thead>
                  <tbody id="files-list">
                    <!-- 文件行将通过JavaScript动态加载 -->
                  </tbody>
                </table>
              </div>
            </div>

            <!-- 空状态 -->
            <div id="files-empty-state" class="text-center py-12 hidden">
              <div class="w-16 h-16 bg-neutral-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fa fa-folder-open text-2xl text-neutral-400"></i>
              </div>
              <h3 class="text-lg font-medium text-neutral-800 mb-2">文件夹为空</h3>
              <p class="text-neutral-600 mb-4">上传一些文件开始管理您的内容</p>
              <button onclick="document.getElementById('upload-btn').click()" 
                      class="btn-primary">
                <i class="fa fa-upload mr-2"></i>上传文件
              </button>
            </div>
          </div>
        </main>
      </div>

      <!-- 移动端遮罩层 -->
      <div id="sidebar-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-30 lg:hidden hidden"></div>
    </div>
  </div>

  <!-- 引入应用脚本 -->
  <script src="/js/utils/api.js"></script>
  <script src="/js/utils/auth.js"></script>
  <script src="/js/utils/notification.js"></script>
  <script src="/js/components/login.js"></script>
  <script src="/js/components/search.js"></script>
  <script src="/js/components/storage.js"></script>
  <script src="/js/components/rich-editor.js"></script>
  <script src="/js/components/file-manager.js"></script>
  <script src="/js/components/dashboard.js"></script>
  <script src="/js/components/notes-manager.js"></script>
  <script src="/js/app.js"></script>
</body>

</html>